<template>
  <customDrawer
    title="修改密码"
    ref="customDrawer"
    :widthPx="460"
    :heightPx="291"
    :zIndex="1000"
    @confirm="handleDrawerConfirm"
    @cancel="handleDrawerCancel"
    :autoHide="false"
  >
    <template #content>
      <customForm :data="form" ref="form" :rules="rules"  :paddingTop="20">
        <template #content>
          <customFormItem
            label="原始密码"
            name="oldPwd"
            :parent="_self"
            :form="form"
            autocomplete="off"
            :config="{ type: 'password' }"
          />
          <customFormItem
            label="新密码"
            name="newPwd"
            :parent="_self"
            :form="form"
            autocomplete="off"
            :config="{ type: 'password' }"
          />
          <customFormItem
            label="确认密码"
            name="confirmPwd"
            :parent="_self"
            :form="form"
            autocomplete="off"
            :config="{ type: 'password' }"
          />
        </template>
      </customForm>
    </template>
  </customDrawer>
</template>

<script>
export default {
  desc: '修改密码控件',
  name: 'passwordDrawer',
  data() {
    const checkNewPwd = (value) => {
      if (value === '') {
        return { result: false, message: '请输入新密码', type: 'error' }
      }
      if (value === this.form.oldPwd) {
        return { result: false, message: '新密码不能与原始密码一致', type: 'error' }
      }
      return { result: true }
    }

    const checkConfirmPwd = (value) => {
      if (value === '') {
        return { result: false, message: '请输入确认密码', type: 'error' }
      }
      if (value !== this.form.newPwd) {
        return { result: false, message: '两次输入密码不一致', type: 'error' }
      }
      return { result: true }
    }
    return {
      form: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
      },
      rules: {
        oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: checkNewPwd, trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: checkConfirmPwd, trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    /**
     * @Description：显示
     * @Date 2023-10-21
     */
    show() {
      this.$refs.customDrawer.show()
    },

    handleDrawerConfirm() {
      this.$refs.form.validate().then((result) => {
        if (result && result == true) {
          this.$ajax
            .post('/user/password', {
              oldPassword: this.form.oldPwd,
              newPassword: this.form.newPwd,
            })
            .then((resp) => {
              console.log('resp', resp)
              if (resp.code == 0) {
                this.utilMessage.alertSuccess('您修改了密码，需要重新登录', () => {
                  sessionStorage.clear()
                  window.location.reload()
                })
              }
            })
        }
      })
    },
    handleDrawerCancel() {
      this.$set(this.form, 'oldPwd', '')
      this.$set(this.form, 'newPwd', '')
      this.$set(this.form, 'confirmPwd', '')
    },
  },
}
</script>
<style scoped></style>
